import { Routes, Route } from 'react-router-dom'
import AuthRoute from '@/components/AuthRoute'
import { history, HistoryRouter } from '@/utils'
import './App.scss'
import { lazy, Suspense } from 'react'

const Layout = lazy(() => import('@/pages/Layout'))
const Login = lazy(() => import('@/pages/Login'))
const Home = lazy(() => import('@/pages/Home'))
const Publish = lazy(() => import('@/pages/Publish'))
const Article = lazy(() => import('@/pages/Article'))


function App () {
	return (
		<HistoryRouter history={history}>
			<Suspense
				fallback={
					<div
						style={{
							textAlign: 'center',
							marginTop: 200
						}}
					>
						loading...
					</div>
				}
			>
				<div className="App">
					<Routes>
						<Route path="/"
							element={<AuthRoute>
								<Layout />
							</AuthRoute>}
						>
							<Route index element={<Home />}></Route>
							<Route path="/publish" element={<Publish />}></Route>
							<Route path="/article" element={<Article />}></Route>
						</Route>
						<Route path="/login" element={<Login />}></Route>
					</Routes>
				</div>
			</Suspense>
		</HistoryRouter>
	)
}

export default App
